<template>
	<div class="index_div">
		<div class="search_div">
			<span class="icon-search"></span>
			<input type="text" name="" placeholder="城市/区域/景点" v-on:focus="getFocus()" v-on:blur="getBlur()">
		</div>
		<swiperbanner-com class="banner_div"></swiperbanner-com>
		<div class="tab_new_hot">
			<p :class="new_hot_active === 'new_product'?'tab_now':''" @click="btn_new_hot('new_product')">新品速递</p>
			<p :class="new_hot_active === 'hot_product'?'tab_now':''" @click="btn_new_hot('hot_product')">热门推荐</p>
		</div>
		<swiper-com :newHotSwiper="bindSwiper"></swiper-com>
		<div class="DIY_div" :binddata="ADinfo">
			<img v-lazy="baseImg+AD_src" alt="" style="width: 100%; height:100%; ">
		</div>
		<div class="recom_div">
			<p class="tl">目的地推荐<span class="fr" @click="btn_moreGoods">更多</span></p>
		</div>
        <mt-navbar>
			<mt-tab-item id="1" class="colorA9" :class="active === 'MDD'?'color32':''" @click.native.prevent="active = 'MDD'">目的地精选</mt-tab-item>
			<mt-tab-item id="2" class="colorA9" :class="active === 'HD'?'color32':''" @click.native.prevent="active = 'HD'">海岛精选</mt-tab-item>
			<mt-tab-item id="3" class="colorA9" :class="active === 'DJ'?'color32':''" @click.native.prevent="active = 'DJ'">冬季精选</mt-tab-item>
        </mt-navbar>
		<mt-tab-container v-model="active" :bindaOne="selectionInfoOne" :bindTwo="selectionInfoTwo" :bindThree="selectionInfoThree"><!--swipeable-->
			<mt-tab-container-item id="MDD">
				<hot-com :selOne="mudidi"></hot-com>
			</mt-tab-container-item>
			<mt-tab-container-item id="HD">
				<hot-com :selOne="mudidi"></hot-com>
			</mt-tab-container-item>
			<mt-tab-container-item id="DJ">
				<hot-com :selOne="mudidi"></hot-com>
			</mt-tab-container-item>
		</mt-tab-container>
        
		<footer-com></footer-com>
	</div>
</template>
<script>
	import footer from '../footer/footer.vue'
	import hot from './hot.vue'
	import swiper from './swiper.vue'
	import swiperbanner from './swiperbanner.vue'
	
	export default{
		name: 'index',
		data(){
			return {
				baseImg:"https://md.singaporetong.com",
				new_hot_active:'new_product',
				active: 'MDD',
				AD_src:'',
				mudidi:{},
			}
		},

		beforeRouteEnter:function(to,from,next){
			if(to.path == '/index'){
				next(function(vm){
					document.body.scrollTop = 0;
					//console.log(vm)
					vm.$store.state.routerIndex = true;
					vm.$store.state.routerDis = false;
					vm.$store.state.routerOrder = false;
					vm.$store.state.routerMine = false;
					
				});
				//vm.dispatchType = 'index';
			}
		},
		components:{
            "footer-com": footer,
            "hot-com": hot,
            "swiper-com":swiper,
            "swiperbanner-com":swiperbanner,
        },
        methods:{
            getFocus:function(){
                this.$router.push({ path: '/search' })
            },
            getBlur:function(){
               
            },
            //新品速递 热门推荐tab
            btn_new_hot:function(type){
            	//this.$store.state.index.new_hot = type;
            	this.new_hot_active = type;
            	//this.$store.dispatch('get_newPro');
            },
            btn_moreGoods:function(){
            	this.$router.push({ path: '/goodslist' })
            }
        },
        mounted:function(){
            this.$store.dispatch('get_newPro');
            this.$store.dispatch('get_hotPro');
            this.$store.dispatch('get_indexAD');
            this.$store.dispatch('get_selection');
            
        },
        computed:{
        	bindSwiper(){
        		var _res = [];
        		if(this.new_hot_active == "new_product"){
    				if(this.$store.state.index.newProList == undefined){
    					return false;
    				}
        			this.$nextTick(function(){
	        			_res = this.$store.state.index.newProList;
        			})
	        		console.log(_res)
	        		return this.$store.state.index.newProList;
        		}else if(this.new_hot_active == "hot_product"){
        			//_res = this.$store.state.index.hotProList;
    				if(this.$store.state.index.hotProList == undefined){
    					return false;
    				}
        			this.$nextTick(function(){
	        			_res = this.$store.state.index.hotProList;
        			})
	        		console.log(_res)
	        		return this.$store.state.index.hotProList;
        		}
        		console.log(_res)
        		return _res;
        	},
        	ADinfo(){//
        		var _res = this.$store.state.index.indexADList;
        		if(_res.image == undefined){
        			return false;
        		}else{
	        		this.AD_src = _res.image;
        		}
        		return this.$store.state.index.indexADList;
        	},
        	selectionInfoOne(){
        		var _res = this.$store.state.index.selectionList_one;
        		if(_res == undefined){
        			return false;
        		}else{
        			this.mudidi = _res;
        		}
        		return this.$store.state.index.selectionList_one;
        	},
        	selectionInfoTwo(){
        		var _res = this.$store.state.index.selectionList_two;
        		if(_res == undefined){
        			return false;
        		}else{
        			this.mudidi = _res;
        		}
        		return this.$store.state.index.selectionList_two;
        	},
        	selectionInfoThree(){
        		var _res = this.$store.state.index.selectionList_three;
        		if(_res == undefined){
        			return false;
        		}else{
        			this.mudidi = _res;
        		}
        		return this.$store.state.index.selectionList_three;
        	}
        },
        watch:{
        	// 目的地推荐切换
        	active(curVal,oldVal){
        		if(curVal == "MDD"){
        			this.mudidi = this.$store.state.index.selectionList_one;
        		}else if(curVal == "HD"){
        			this.mudidi = this.$store.state.index.selectionList_two;
        		}else if(curVal == "DJ"){
        			this.mudidi = this.$store.state.index.selectionList_three;
        		}
        	}
        }
	}
</script>
<style rel="stylesheet" scoped>
	.index_div{
		padding-bottom: 1.3333rem;
		background-color: #FFF;
	}
	
	.banner_div{
		width: 100%;
		
	}
	.tab_new_hot{
		overflow: hidden;
		text-align: center;
		padding: 0.5333rem 0;
	}
	.tab_new_hot p{
		display: inline-block;
		height: 0.5333rem;
		/* width: 1.6rem; */
		font-size: 0.4rem;
		font-family: PingFangSC-Regular;
		color: #A9A9A9;
		margin: 0 0.2667rem;
		letter-spacing: 0.0043remx;
		cursor: pointer;
		position: relative;
	}
	.tab_new_hot .tab_now{
		color: #323232;
	}
	.tab_new_hot .tab_now:after{
		content: "";
		color: #323232;
		position: absolute;
		width: 0.4rem;
		height: 0.0533rem;
		background-color: #323232;
		bottom: -0.1067rem;
		left: 0.6rem;
	}
	.DIY_div{
		width: 100%;
		height: 2.4rem;
		margin-top: 0.325rem;
	}
	.recom_div{
		box-sizing: border-box;
		padding: 0.3733rem 0.5333rem;
	}
	.recom_div p{
		font-family: PingFangSC-Regular;
		font-size: 0.4267rem;
		color: #323232;
		letter-spacing: 0.0045rem;
	}
	/* .indexIcon{background:url(../../assets/img/indexIcon.png)  no-repeat;} */
	/* .icon_030{height:2px;width:16px;background-position:0 0;}
	.app_icon_029{height:25px;width:25px;background-position:0 -2px;}
	.app_icon_030{height:25px;width:25px;background-position:0 -27px;}
	.app_icon_031{height:25px;width:25px;background-position:0 -52px;}
	.app_icon_028{height:25px;width:25px;background-position:0 -77px;}
	.app_icon_014{height:25px;width:25px;background-position:0 -102px;}
	.app_icon_013{height:25px;width:25px;background-position:0 -127px;}
	.app_icon_016{height:25px;width:25px;background-position:0 -152px;}
	.app_icon_015{height:25px;width:25px;background-position:0 -177px;}
	.icon_031{height:22px;width:44px;background-position:0 -202px;} */
</style>